<template>
  <div :class="['common_tree_wrap', !pushFlag && 'zeroWidth']">
    <div v-show="pushFlag" class="tree_content">
      <div class="tree_search_wrap">
        <div class="search_ipt">
          <el-input
            v-model="filterText"
            class="jk_common_input000"
            placeholder="请输入搜索节点"
            suffix-icon="el-icon-search"
            clearable
          />
        </div>
        <div class="his_wrap">
          <div class="his_top">
            <div class="btn_item1">历史记录</div>
            <div class="btn_item2 el-icon-delete"></div>
          </div>
          <div class="his_btm">
            <div
              class="his_btm_item"
              title="操作员站1操作员站1操作员站1操作员站1"
            >
              操作员站1操作员站1操作员站1操作员站1
            </div>
            <div class="his_btm_item" title="大屏大屏大屏">大屏大屏大屏</div>
            <div class="his_btm_item" title="动态服务器动态服务器动态服务器">
              动态服务器动态服务器动态服务器
            </div>
          </div>
        </div>
      </div>
      <div class="tree_main">
        <el-scrollbar class="el-scrollbar-bai">
          <el-tree
            class="jk_common_tree000"
            :data="treeDate"
            :props="defaultProps"
            :expand-on-click-node="false"
            node-key="label"
            ref="tree"
            :filter-node-method="filterNode"
            current-node-key="板卡1"
            default-expand-all
            @node-click="handleNodeClick"
          />
        </el-scrollbar>
      </div>
    </div>
    <div v-show="!pushFlag" class="tree_not_content">
      <div class="not_content_text">设备类型树</div>
    </div>
    <div class="push_wrap" @click="onPushBoxFn">
      <div
        :class="[
          'push_icon',
          pushFlag ? 'el-icon-d-arrow-left' : 'el-icon-d-arrow-right',
        ]"
      ></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      filterText: "",
      treeDate: [
        {
          label: "DOS系统",
          children: [
            {
              label: "操作员站1",
              children: [],
            },
            {
              label: "操作员站2",
              children: [],
            },
            {
              label: "历史服务器",
              children: [],
            },
            {
              label: "计算服务器",
              children: [],
            },
            {
              label: "通信服务器",
              children: [],
            },
            {
              label: "控制站1",
              children: [],
            },
            {
              label: "控制站2",
              children: [
                {
                  id: 1,
                  label: "板卡1",
                },
                {
                  label: "板卡2",
                },
              ],
            },
            {
              label: "网关",
              children: [],
            },
            {
              label: "交换机",
              children: [],
            },
            {
              label: "打印机",
              children: [],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      pushFlag: true, //是否是打开状态
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    //tree点击节点
    handleNodeClick(cell, node) {
      console.log(node);
      //   if (node.level == "3") {
      //     this.title = cell.label;
      //     this.clickRaioOrLine(cell.label);
      //   }
    },
    onPushBoxFn() {
      this.pushFlag = !this.pushFlag;
    },
  },
};
</script>
<style lang="scss" scoped>
.common_tree_wrap {
  width: 256px;
  height: 100%;
  background: linear-gradient(to bottom, #153770, #0f264d);
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.3s linear;
  &.zeroWidth {
    width: 30px;
    padding: 20px 0;
  }
  .tree_content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .tree_search_wrap {
      flex: 0 0 auto;
      .search_ipt {
        width: 100%;
        margin-bottom: 10px;
      }
      .his_wrap {
        .his_top {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .btn_item1 {
            padding: 0 12px;
            height: 26px;
            line-height: 26px;
            font-size: 14px;
            border: 1px solid #1f4f7f;
            background-color: #0f2a56;
            color: #80bdff;
          }
          .btn_item2 {
            font-size: 16px;
            font-weight: 700;
            color: #79b0ed;
            cursor: pointer;
            margin-right: 10px;
            &:hover {
              opacity: 0.9;
            }
          }
        }
        .his_btm {
          margin-top: 16px;
          display: flex;
          align-items: center;
          .his_btm_item {
            flex: 1 1 auto;
            margin-left: 10px;
            font-size: 14px;
            line-height: 20px;
            height: 20px;
            color: #80bdff;
            cursor: pointer;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            &:hover {
              text-decoration: underline;
            }
          }
        }
      }
    }
    .tree_main {
      flex: 1 1 auto;
      margin-top: 20px;
      box-sizing: border-box;
      padding-right: 10px;
    }
  }

  .tree_not_content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    .not_content_text {
      width: 20px;
      font-size: 16px;
      text-align: center;
      color: #e0efff;
    }
  }

  .push_wrap {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 50px;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    &:hover {
      .push_icon {
        font-weight: 700;
      }
    }
    .push_icon {
      color: #e0efff;
    }
  }
}
</style>
